import classNames from 'classnames';
import React, { useEffect, useRef, useState } from 'react';

type PopoverTitleType = string | number;

type PopoverContentType = string | number;

interface PopoverProps {
    title?: PopoverTitleType
    content?: PopoverContentType
    trigger?: 'click' | 'hover' | 'focus' | 'manual'
    placement?: "bottom" | "bottom-start" | "left-end" | "left" | "left-start" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end"
    minWidth?: number
    maxWidth?: number
    minHeight?: number
    maxHeight?: number
    referenceJSX?: React.ReactNode
    contentJSX?: React.ReactNode
    className?: string
    style?: React.CSSProperties
    onChange?: (e: MouseEvent) => void
}

const Popover: React.FC<PopoverProps> = props => {

    const { title, content, className, style, minWidth, maxWidth, minHeight, maxHeight, referenceJSX, contentJSX, trigger, onChange } = props;

    const PopoverReferenceRef = useRef<HTMLDivElement>(null);

    const [isShow, setIsShow] = useState<boolean>(false)

    const classes = classNames(className, "packages-yulang-popover-container");

    const styles = {
        ...{
            '--yulang-popover-reference-min-width--': minWidth + 'px',
            '--yulang-popover-reference-max-width--': maxWidth + 'px',
            '--yulang-popover-position-min-height--': minHeight + 'px',
            '--yulang-popover-position-max-height--': maxHeight + 'px',
        }, ...style
    } as React.CSSProperties;

    const contentStyle = { 'display': isShow ? 'block' : 'none' } as React.CSSProperties;


    const showChange = (e: MouseEvent) => {
        console.log(isShow, !isShow);
        setIsShow(!isShow);
        onChange && onChange(e);
    }

    useEffect(() => {
        console.log(isShow);
    }, [isShow])

    useEffect(() => {
        if (PopoverReferenceRef.current) {
            if (trigger === "click") {
                PopoverReferenceRef.current.addEventListener("click", (e) => {
                    console.log(123);
                    showChange(e)
                });
            }
            if (trigger === "hover") {
                PopoverReferenceRef.current.addEventListener("mouseenter", (e) => {
                    showChange(e);
                });
                PopoverReferenceRef.current.addEventListener("mouseleave", (e) => {
                    showChange(e);
                });
            }
            if (trigger === "focus") {
                // longClick(this.$refs.referenceRef, this.showChange.bind(this));
            }
        }
    }, [])

    return <div className={classes} style={styles}>
        <div className={"yulang-popover-reference"}>
            {/* 触发区 */}
            <div ref={PopoverReferenceRef}>
                {referenceJSX ? referenceJSX : <></>}
            </div>
            {/* 内容区 */}
            <div
                className={"yulang-popover-position"}
                style={contentStyle}
            >
                {/* 标题 */}
                {title ? <div className={"yulang-popover-title"}>
                    <span>{title}</span>
                </div> : <></>}
                {/* 内容区 */}
                <div className={"yulang-popover-content"}>
                    {contentJSX ? contentJSX : <div>{content}</div>}
                </div>
            </div>
        </div>
    </div >
}

Popover.defaultProps = {
    minWidth: 100,
    maxWidth: 500,
    minHeight: 16,
    maxHeight: 500,
    trigger: 'click',
    placement: 'bottom'
}

export default Popover;